<script>
import { mapMutations } from 'vuex'
export default {
  data () {
		return {
			gedanList: null
		}
  },
  mounted() {
		this.getGedanList()
	},
  methods: {
    ...mapMutations('music', ['SET_CUR_PLAYLIST']),
		getGedanList() {
			this.$axios.get('/api/top/playlist/highquality?limit=6').then(res => {
				this.gedanList = res.data.playlists
			})
    },
    viewDetail (item) {
      this.SET_CUR_PLAYLIST(item)
      this.$goByName('playlist', {pid: item.id})
    }
	}
}
</script>
<template lang="pug">
.recom-wrapper
  .recom-title
    span 推荐歌单
    i.iconfont.icon-enter
  .recom-list
    .recom-item(v-for="i, index in gedanList")
      .recom-item__pic
        img(:src="i.coverImgUrl" @click="viewDetail(i)")
        .recom-item__num
          i.iconfont.icon-erji
          span 10万
      p.ell2 {{i.name}}
</template>
<style lang="stylus" scoped>
.recom-wrapper
  padding 0 7px
  >.recom-title
    padding-top 30px
    padding-bottom 18px
    font-size 17px
    font-weight bold
  .recom-list
    display flex
    flex-wrap wrap
    >.recom-item
      padding-bottom 30px
      width calc(calc(100% / 3) - 2px)
      box-sizing border-box
      margin-right 3px
      &:nth-of-type(3n)
        margin-right 0
      .recom-item__pic
        position relative
        .recom-item__num
          position absolute
          top 5px
          right 5px
          font-size 12px
          color #FFF
      img
        width 100%
        height 115px
        border-radius 5px
</style>
